<template>
  <div class="create-button" @click="createItem">
    <p>创建新待办</p>
  </div>
</template>

<script setup>
import { defineEmits } from 'vue'

const emit = defineEmits(['create'])

function createItem() {
  emit('create');
}
</script>

<style scoped>
.create-button {
  width: 380px;
  height: 40px;
  padding: 10px;

  background-color: #f9fdbc;
  cursor: pointer;

  /* 保证文本在纵向上处于中间位置 */
  display: flex;
  align-items: center;
}

.create-button:hover {
  background-color: #f7ff81;
}

p {
  color:rgb(110, 110, 110)
}
</style>